<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/main' }">主界面</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in data" :key="item.name" :to="{ path: item.path }">
          <span v-if="index === data.length - 1" style="color: #ff3e41;"> {{ item.name }}</span>
          <span v-else>
            {{ item.name }}
          </span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { useRouter, useRoute, isNavigationFailure } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'

const router = useRouter()
const route = useRoute()
const data = ref([])

router.afterEach((to, from, failure) => {
  if(isNavigationFailure(failure)) {
    /*console.log('failed navigation', failure);*/
    return;
  }
  /*const arr = route.matched.filter((item) => {*/
  /*  return item.name*/
  /*})*/
  const arr = route.matched
  data.value.splice(0, data.value.length)
  console.log(arr)
  for(const item of arr) {
    if(item.path !== '/')
      data.value.push(item)
  }
  console.log(data.value)
})

onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
    .el-breadcrumb{
        margin-top: 20px;

      .is-link{
         cursor: pointer;
      }
    }

</style>
